<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TheJS Survey</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.6-rc.1/dist/css/select2.min.css" integrity="sha256-MeSf8Rmg3b5qLFlijnpxk6l+IJkiR91//YGPCrCmogU=" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/app.css">
</head>
<body>
      <section role="main" class="main">
        <div class="container">
          <div class="align-items-center p-3 my-3 text-white-50 bg-gray rounded shadow-sm">
            <div class="row">
              <div class="col-xl-1 col-lg-1 col-3 col-md-2">
                <img src="/static/i.png" alt="" width="48" height="48"/>
              </div>
              <div class="col-xl-9 col-lg-9 col-6 col-md-7">
                <div>
                  <h6 class="mb-0 text-white lh-100">TheJS Puzzle
                  </h6>
                  <small class="text-light">codebreaking thejs<a href="" data-highlightable="1" class="link"></a></small>
                </div>
              </div>
              <div class="col-xl-2 col-lg-2 col-3 col-md-3">
              </div>
            </div>
          </div>
          <div class="my-3 p-3 bg-white rounded shadow-sm log">
            <form method="post">
                <div class="log text-muted pt-3">
                    <h3 data-type="header">Select Your Favorite Languages</h3>
                </div>
                <div class="selector">
                    <select class="form-control" name="language[]" multiple="multiple">
                        <option value="php" <%- language.indexOf('php') >= 0 ? 'selected' : '' %> >PHP</option>
                        <option value="python" <%- language.indexOf('python') >= 0 ? 'selected' : '' %> >Python</option>
                        <option value="go" <%- language.indexOf('go') >= 0 ? 'selected' : '' %> >GO</option>
                        <option value="javascript" <%- language.indexOf('javascript') >= 0 ? 'selected' : '' %> >Javascript</option>
                        <option value="java" <%- language.indexOf('java') >= 0 ? 'selected' : '' %> >JAVA</option>
                        <option value="ruby" <%- language.indexOf('ruby') >= 0 ? 'selected' : '' %> >Ruby</option>
                    </select>
                </div>

                <div class="log text-muted pt-3">
                    <h3 data-type="header">Puzzle Categories</h3>
                </div>
                <div class="selector">
                    <select class="form-control" name="category[]" multiple="multiple">
                        <option value="web" <%- category.indexOf('web') >= 0 ? 'selected' : '' %> >Web</option>
                        <option value="pwn" <%- category.indexOf('pwn') >= 0 ? 'selected' : '' %> >PWN</option>
                        <option value="crypto" <%- category.indexOf('crypto') >= 0 ? 'selected' : '' %> >Crypto</option>
                        <option value="reverse" <%- category.indexOf('reverse') >= 0 ? 'selected' : '' %> >Reverse</option>
                        <option value="misc" <%- category.indexOf('misc') >= 0 ? 'selected' : '' %> >Misc</option>
                    </select>
                </div>
                
                <div class="container c5841 p0">
                  <button type="submit" class="btn btn-primary mb-2">Add</button>
                </div>
            </form>
          </div>
        </div>
      </section>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.6-rc.1/dist/js/select2.min.js" integrity="sha256-190Fv8aJAduyyIOnvWVpjCmzkX1h8OEtGWbcoU1QVsA=" crossorigin="anonymous"></script>
    <script>
    $(document).ready(function() {
        $('.selector select').select2();
    });
    </script>
</body>
</html>